<%--
    成员列表界面
    Author: scm
    Date: 2023-12-12
    Version: 1.0
--%>
<%--
    需要的数据
    userList 根据搜索框输入的username（可能不完整），返回查找到的所有符合的社团成员
    如果搜索框没输入，则返回所有成员

    currentPage 就是页面传入的参数page（具体见本页面“分页展示部分”）
    totalPage 总用户数/每页展示的用户数（我这里设置的10）

    传入的数据
    keyword 搜索的关键词（见搜索部分）
    page 当前页面号（见分页展示部分）
--%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="m" uri="/WEB-INF/tld/mytag.tld"%>
<%@ page session="true" %>
<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<c:url value="/resources/css/bootstrap.css"/>">
    <link rel="stylesheet" href="<c:url value="/resources/css/clubStyle.css"/>">
    <title>校园社团管理系统</title>
</head>
<body>
<!-- 顶部导航栏 -->
<jsp:include page="./header.jsp" />
<div class="content container">
    <!-- 搜索框  -->
    <nav class="navbar bg-body-tertiary">
        <div class="container-fluid">
            <div class="fs-4 fw-bolder">社团成员</div>
            <form class="d-flex" role="search" action="<c:url value="../clubAdministrator/users" />" method="get">
                <input type="search" class="form-control me-2" placeholder="输入用户名" name="keyword" aria-label="Search">
                <button class="btn btn-outline-success text-nowrap" type="submit" id="search">搜索</button>
            </form>
        </div>
    </nav>
    <!-- user信息列表  -->
    <div class="list">
        <c:if test="${not empty userList}">
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col" class="text-center">ID</th>
                <th scope="col">用户名</th>
                <th scope="col">昵称</th>
                <th scope="col">学院</th>
                <th scope="col">联系电话</th>
                <th scope="col">操作</th>
            </tr>
            </thead>
            <c:forEach items="${userList}" var="user" varStatus="loop" begin="${(currentPage-1)*10}" end="${currentPage*10-1}">
                <tr>
                    <th scope="row" class="text-center">${user.userID}</th>
                    <td>${user.username}</td>
                    <td>${user.nickname}</td>
                    <td>${user.college}</td>
                    <td>${user.telephone}</td>
                    <!-- 详细信息按钮 modal -->
                    <td>
                        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-toggle="modal" data-bs-target="#detailModel${loop.index}">
                            详细信息
                        </button>
                        <div class="modal fade" id="detailModel${loop.index}" tabindex="-1" aria-labelledby="detailModelLabel" aria-hidden="true">
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="detailModelLabel">${user.nickname}的详细信息</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body">
                                        <m:showInfo user="${user}" identity="clubAdministrator"/>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </td>
                </tr>
            </c:forEach>
        </table>
            <!-- 分页展示 -->
            <div class="d-flex justify-content-evenly">
                <c:if test="${currentPage > 1}">
                    <div class="pre-page">
                        <a href="<c:url value="../clubAdministrator/users?page=${currentPage - 1}" />" class="btn btn-outline-secondary">&lt; 上一页</a>
                    </div>
                </c:if>
                <c:if test="${currentPage <= 1}">
                    <div class="pre-page">
                        <a href="<c:url value="../clubAdministrator/users?page=${currentPage - 1}" />" class="btn btn-outline-secondary disabled">&lt; 上一页</a>
                    </div>
                </c:if>
                <p class="currentPage ">第 ${currentPage} 页</p>
                <c:if test="${currentPage < totalPage}">
                    <div class="next-page">
                        <a href="<c:url value="../clubAdministrator/users?page=${currentPage + 1}" />" class="btn btn-outline-secondary">下一页 &gt;</a>
                    </div>
                </c:if>
                <c:if test="${currentPage >= totalPage}">
                    <div class="next-page">
                        <a href="<c:url value="../clubAdministrator/users?page=${currentPage + 1}" />" class="btn btn-outline-secondary disabled">下一页 &gt;</a>
                    </div>
                </c:if>
            </div>
            </c:if>
            <c:if test="${empty userList}">
                <p class="text-center text-danger">无社团成员</p>
            </c:if>
    </div>
</div>
<jsp:include page="./footer.jsp" />
<script src="<c:url value="/resources/js/bootstrap.bundle.js" />"></script>
</body>
</html>